<template>
  <el-dialog
    ref="infodialog"
    title="项目详情"
    :visible.sync="isSeeInfo"
    width="60%"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :destroy-on-close="true"
  >
    <el-form
      v-if="dialogItemObj"
      :model="dialogItemObj"
      label-width="140px"
      label-position="left"
    >
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基础信息" name="1">
          <el-col :span="24">
            <el-col :span="8">
              <el-form-item label="项目名称:">
                <span>{{ dialogItemObj.projectName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申报类别:">
                <span>{{ dialogItemObj.projectType }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申报单位:">
                <span>{{ dialogItemObj.projectUnit }}</span>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="24">
            <el-col :span="8">
              <el-form-item label="项目负责人姓名/职称:">
                <span>{{ dialogItemObj.specialistInfo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="通讯地址及邮编:">
                <span>{{ dialogItemObj.contractAddress }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码及邮箱:">
                <span>{{ dialogItemObj.contractPhone }}</span>
              </el-form-item>
            </el-col>
          </el-col>

          <el-col :span="24">
            <el-col :span="8">
              <el-form-item label="合作单位:">
                <span>{{ dialogItemObj.cooperateUnit }}</span>
              </el-form-item>
            </el-col>
          </el-col>
        </el-collapse-item>
        <el-collapse-item title="重要信息" name="2">
          <el-col :span="24">
            <el-form-item label="一、目的和意义:">
              <span>{{ dialogItemObj.content.purpose }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="二、实施基础与条件:">
              <span>{{ dialogItemObj.content.base }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="三、实施内容:">
              <span>{{ dialogItemObj.content.content }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="四、实施计划进度:">
              <span>{{ dialogItemObj.content.plan }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="五、主要技术指标及预期:">
              <span>{{ dialogItemObj.content.target }}</span>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="六、考核指标分解:">
              <el-table
                border
                style="width: 100%"
                :data="dialogItemObj.content.targets"
              >
                <el-table-column label="#" width="50" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="unitName"
                  label="单位名称"
                  align="center"
                />
                <el-table-column prop="name" label="考核指标" align="center" />
                <el-table-column
                  prop="yusuan"
                  label="资金预算(万元)"
                  align="center"
                />
                <el-table-column
                  prop="zichou"
                  label="自筹资金(万元)"
                  align="center"
                />
              </el-table>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="七、实施人员:">
              <el-table
                :data="dialogItemObj.xmProjectPersonList"
                border
                style="width: 100%"
              >
                <el-table-column label="#" width="50" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.sort + 1 }}
                  </template>
                </el-table-column>
                <el-table-column prop="createBy" label="姓名" align="center" />
                <el-table-column prop="personAge" label="年龄" align="center" />
                <el-table-column
                  prop="personUnit"
                  label="单位"
                  align="center"
                />
                <el-table-column
                  prop="personZhiji"
                  label="职务、职称"
                  align="center"
                />
                <el-table-column
                  prop="personWork"
                  label="在项目实施过程中拟承担的具体工作"
                  align="center"
                />
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="八、项目实施经费预算:">
              <el-table
                :data="dialogItemObj.xmProjectFundsList"
                border
                style="width: 100%"
              >
                <el-table-column label="#" width="50" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.fundsEnumKey }}
                  </template>
                </el-table-column>
                <el-table-column label="预算支出科目" align="center">
                  <template slot-scope="scope">
                    {{ yusuanlist[scope.row.fundsEnumKey - 1] }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fundsAmount"
                  label="金额（万元）"
                  align="center"
                />
                <el-table-column prop="note" label="备注" align="center" />
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="九、保障条件:">
              <el-col :span="24">
                一、
                {{ dialogItemObj.content.conditionFirst }}
              </el-col>
              <el-col :span="24">
                二、
                {{ dialogItemObj.content.conditionSecond }}
              </el-col>
            </el-form-item>
          </el-col>
        </el-collapse-item>
        <el-collapse-item title="审核流程" name="3">
          <el-steps :active="100" align-left>
            <el-step
              v-for="(i, index) in dialogItemObj.xmProjectCommentList"
              :key="index"
              :title="i.createBy"
              :description="i.projectPeriodText"
            >
            </el-step>
          </el-steps>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    isSeeInfo: {
      type: Boolean,
      default: () => false,
    },
    dialogItemObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeNames: "1",
      yusuanlist: [
        "咨询费",
        "差旅费",
        "培训/会议费",
        "劳务费",
        "专用设备购置费",
        "专用材料购置费",
        "图书文献数据费",
        "出版/文献/信息传播/知识产权事务费",
        "其他支出",
        "咨询费",
        "差旅费",
        "培训/会议费",
        "劳务费",
        "专用设备购置费",
        "专用材料购置费",
        "图书文献数据费",
        "出版/文献/信息传播/知识产权事务费",
        "其他支出",
      ],
    };
  },
  methods: {
    handleClose() {
      this.$emit("handleCloseFn", false);
    },
  },
};
</script>

<style></style>
